<template>
  <button class="popover-main" ref="el" @focus="show = true" @blur="show = false">
    <Transition name="popover">
      <div
        v-if="show"
        class="popover-content"
        :class="[state.placement]"
        :style="{
          top: state.top,
          right: state.right,
          bottom: state.bottom,
          left: state.left
        }"
      >
        <slot name="content" />
      </div>
    </Transition>

    <slot />
  </button>
</template>

<script setup lang="ts">
interface Props {
  placement: 'bottom' | 'top' | 'left' | 'right'
}

const props = withDefaults(defineProps<Props>(), {
  placement: 'bottom'
})

const state = ref({
  placement: 'popover-content-top',
  top: '',
  right: '',
  bottom: '',
  left: ''
})

const el = ref()
const show = ref(false)

onMounted(() => {
  const contentEl = el.value.lastElementChild

  switch (props.placement) {
    case 'top':
      state.value.placement = 'popover-content-top'
      state.value.bottom = `${contentEl.offsetHeight + 20}px`
      break
    case 'right':
      state.value.placement = 'popover-content-right'
      state.value.left = `${contentEl.offsetWidth + 20}px`
      break
    case 'bottom':
      state.value.placement = 'popover-content-bottom'
      state.value.top = `${contentEl.offsetHeight + 20}px`
      break
    case 'left':
      state.value.placement = 'popover-content-left'
      state.value.right = `${contentEl.offsetWidth + 20}px`
      break
    default:
      break
  }
})
</script>

<style scoped lang="scss">
.popover-main {
  outline: none;
  border: none;
  background: none;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .popover-content {
    box-shadow: 0 0 5px #b3b3b3;
    min-height: 60px;
    min-width: 140px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    transition: 0.6s;
    z-index: 99;

    &::before {
      content: '';
      height: 20px;
      width: 20px;
      position: absolute;
      background: #fff;
      box-shadow: 2px -2px 5px -2px #b3b3b3;
    }
  }

  .popover-content-top {
    &::before {
      bottom: -10px;
      transform: rotate(135deg);
    }
  }
  .popover-content-right {
    &::before {
      left: -10px;
      transform: rotate(225deg);
    }
  }
  .popover-content-bottom {
    &::before {
      top: -10px;
      transform: rotate(-45deg);
    }
  }
  .popover-content-left {
    &::before {
      right: -10px;
      transform: rotate(45deg);
    }
  }
}

.popover-enter-active,
.popover-leave-active {
  opacity: 1;
}

.popover-enter-from,
.popover-leave-to {
  opacity: 0;
}
</style>
